<template>
  <div class="header">
    <!-- 头部左侧Logo和标题 -->
    <a href="#/">
      <img class="logo" src="@/assets/logo.png" width="25px" />
      <span class="company">后台管理平台</span>
    </a>
    <!-- 头部右侧下拉菜单 -->
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        {{ user.name }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a">修改密码</el-dropdown-item>
        <el-dropdown-item command="b">退出系统</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: this.$store.state.user.user
    };
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case "a":
          // 修改密码
          break;
        case "b":
          // 退出系统
          this.$confirm("确定要退出系统吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            // 确定
            this.handleLogout();
          });
          break;
        default:
          break;
      }
    },
    handleLogout() {
      this.$store.dispatch("Logout").then(response => {
        if (response.flag) {
          // 退出成功
          // 回到登录页面
          this.$router.push("/login");
        } else {
          this.$message({
            message: response.message,
            type: "warning",
            duration: 500 // 弹出停留时间
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.logo {
  vertical-align: middle;
  /* 上 右 下 左 */
  padding: 0 10px 0 40px;
}
.company {
  position: absolute;
  color: white;
}
/* 下拉菜单 */
.el-dropdown {
  float: right;
  margin-right: 40px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
</style>
